<template>
  <div class="wrapper" v-show="drawer" @click.self="$emit('click', false)" >
    <div class="wrapper-contain">
      <i class="el-icon-close" @click.stop="$emit('click', false)"></i>
      <div class="wrapper-title">{{name}}</div>
      <slot name="sys/config"></slot>
      <slot name="sys/union"></slot>
      <slot name="sys/module"></slot>
      <slot name="sys/purview"></slot>
      <slot name="user/list"></slot>
      <slot name="org/home"></slot>
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
// import Clickoutside from "element-ui/src/utils/clickoutside";

export default {
  // directives: { Clickoutside },

  model: {
    prop: "drawer",
    event: "click"
  },
  props: ["drawer", "name"],

  data() {
    return {};
  },
  methods: {
    close() {
      this.$emit("click", false);
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 25%;
  overflow: auto;
  margin: 0;
  // background-color: rgba(0, 0, 0, 0.2);
}
.wrapper-contain {
  position: relative;
  top: 50px;
  background-color: #fff;
  height: calc(100% - 50px);
  i {
    position: absolute;
    top: 13px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
  }
  .wrapper-title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px dashed #ccc;
    padding: 0 50px 0 20px;
  }
  .wrapper-content {
    padding: 40px 100px 20px 100px;
    height: calc(100% - 50px);
    overflow: auto;
    .content-item {
      margin-bottom: 20px;
      display: flex;
      span {
        display: inline-block;
        color: #7d8c91;
      }
      .label {
        width: 100px;
        font-size: 12px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .value {
        display: inline-block;
        width: calc(100% - 106px);
      }
      .table {
        width: calc(100% - 106px);
        table {
          border-spacing: 0;
          width: 100%;
          td {
            padding: 10px 0;
            text-align: center;
            border: 1px solid #ccc;
            border-top: 0;
          }
          tbody,
          thead {
            tr > td:nth-last-child(2) {
              border-right: 0px;
            }
            tr > td:nth-last-child(3) {
              border-right: 0px;
            }
          }
          thead {
            td {
              background-color: #66b1ff;
              color: #fff;
              border-top-color: #66b1ff;
              border-right-color: #66b1ff;
              border-bottom-color: #66b1ff;
              font-weight: 600;
            }
            tr > td:nth-child(1) {
              border-left-color: #66b1ff;
            }
          }
        }
      }
    }
  }
  &::before {
    content: "";
    position: fixed;
    left: calc(25% - 6px);
    width: 6px;
    height: 100%;
    background: linear-gradient(
      270deg,
      hsla(0, 0%, 77.3%, 0.8),
      hsla(0, 0%, 82.7%, 0.3)
    );
  }
}
</style>